<template>
  <div class="node-wrap">
    <div class="end-node">
      <div class="end-node-text">流程开始</div>
      <div class="end-node-circle"></div>
    </div>
    <add-node v-model="nodeConfig.child_node"></add-node>
  </div>
</template>

<script>
  import addNode from './addNode.vue';

  export default {
    props: {
      modelValue: { type: Object, default: () => {} },
    },
    components: {
      addNode,
    },
    data() {
      return {
        nodeConfig: {},
        drawer: false,
        isEditTitle: false,
        form: {},
      };
    },
    watch: {
      modelValue: {
        handler(val) {
          this.nodeConfig = val;
        },
        deep: true,
        immediate: true,
      },
    },
    mounted() {
      this.nodeConfig = this.modelValue;
    },
    methods: {},
  };
</script>

<style lang="less" scoped>
  .end-node {
    border-radius: 50%;
    font-size: 14px;
    color: rgba(25, 31, 37, 0.4);
    text-align: left;
  }
  .end-node-circle {
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: #ccc;
  }
  .end-node-text {
    margin-top: 5px;
    text-align: center;
  }
</style>
